<template>
    <a-modal width="auto" v-model:visible="onFullScreen" hide-cancel
             simple render-to-body @close="onExitFullScreen"
    >
        <div>
            <img style="width:'var(--availWidth)'" :src="fullScreenCamera">
        </div>
    </a-modal>
    <a-row class="console-item">
        <a-col :span="5" offset="1" v-for="item in cameras" :key="item.sn">
            <div class="videoContainer">
                <div class="video_pc">
                    <img :src="item.ui.img"  alt="视频" @onerror="reload(item.sn)">
                </div>
                <span>{{ item.displayName }}</span>
                <br>
                <a-space>
                    <a-button status="video" @click="play(item.sn)">
                        <template #icon>
                            <icon-play-arrow-fill/>
                        </template>
                    </a-button>
                    <a-button status="video" @click="stop(item.sn)">
                        <template #icon>
                            <icon-pause/>
                        </template>
                    </a-button>
                    <a-button :status="item.lightOn === '1'  ?  'warning':'video' " @click="lightSwitch(item.sn)">
                        <template #icon>
                            <icon-sun-fill/>
                        </template>
                    </a-button>
                    <a-button status="video" @click="full_screen(item.sn)">
                        <template #icon>
                            <icon-fullscreen/>
                        </template>
                    </a-button>
                    <a-trigger trigger="click" :unmount-on-close="false">
                        <a-button status="video">
                            <template #icon>
                                <icon-more-vertical/>
                            </template>
                        </a-button>
                        <template #content>
                            <div class="pop_menu">
                                <a-space>
                                    <a-space direction="vertical" fill>
                                        <a-space>
                                            <span class="item_name">分辨率</span>
                                            <a-dropdown @select="v => changeFrameSize(item.sn ,v)"
                                                        :popup-max-height="false">
                                                <a-button size="mini">{{ meta.frame_size[item.framesize].desc }}
                                                    <icon-down/>
                                                </a-button>
                                                <template #content>
                                                    <span v-for="(val, index) in meta[item.sensor_name]" :key="index">
                                                    <a-doption class="frame_size_opt"
                                                            :value="meta.frame_size[val].index">{{
                                                        meta.frame_size[val].desc
                                                        }}</a-doption>
                                                    </span>
                                                </template>
                                            </a-dropdown>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">水平镜像</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      @change="event =>switchSetting(item.sn ,'hmirror' ,event , '10')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                                      :model-value="item.hmirror" unchecked-color="rgb(var(--gray-4)">
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">垂直翻转</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      @change="event =>switchSetting(item.sn ,'vflip' ,event , '11')"
                                                      checked-value="1"
                                                      unchecked-value="0" :model-value="item.vflip"
                                                      unchecked-color="rgb(var(--gray-4)">
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">亮度增益</span>
                                            <div>
                                                <a-slider v-model="item['brightness']" :max="2" :step="1" :min="-2"
                                                          @mouseup="sliderSetting(item.sn,'brightness','1')"
                                                          :style="{width: '5em'}"/>
                                            </div>

                                        </a-space>
                                        <a-space>
                                            <span class="item_name">饱和度</span>
                                            <div>
                                                <a-slider v-model="item['saturation']" :max="2" :step="1" :min="-2"
                                                          @mouseup="sliderSetting(item.sn,'saturation','2')"
                                                          :style="{width: '5em'}"/>
                                            </div>

                                        </a-space>
                                        <a-space>
                                            <span class="item_name">画质压缩</span>
                                            <div>
                                                <a-slider v-model="item['quality']" :max="64" :step="1" :min="0"
                                                          @mouseup="sliderSetting(item.sn,'quality','5')"
                                                          :style="{width: '5em'}"/>
                                            </div>

                                        </a-space>
                                        <a-space>
                                            <span class="item_name">锐化</span>
                                            <div>
                                                <a-slider v-model="item['sharpness']" :max="2" :step="1" :min="-2"
                                                          @mouseup="sliderSetting(item.sn,'sharpness','3')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">对比度</span>
                                            <div>
                                                <a-slider v-model="item['contrast']" :max="2" :step="1" :min="-2"
                                                          @mouseup="sliderSetting(item.sn,'contrast','0')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">降噪</span>
                                            <div>
                                                <a-switch size="small" :checked-color="checked_color"
                                                          unchecked-color="rgb(var(--gray-4)"
                                                          :model-value="item.denoise"
                                                          @change="event =>switchSetting(item.sn ,'denoise' ,event , '4')"
                                                          checked-value="1"
                                                          unchecked-value="0"
                                                >
                                                </a-switch>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">特殊效果</span>
                                            <div>
                                                <a-slider v-model="item['special_effect']" :max="6" :step="1"
                                                          :min="0"
                                                          @mouseup="sliderSetting(item.sn,'special_effect','16')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">wb_mode</span>
                                            <div>
                                                <a-slider v-model="item['wb_mode']" :max="4" :step="1" :min="0"
                                                          @mouseup="sliderSetting(item.sn,'wb_mode','17')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">awb_gain</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.awb_gain"
                                                      @change="event =>switchSetting(item.sn ,'awb_gain' ,event , '13')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">exposure_ctrl</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.exposure_ctrl"
                                                      @change="event =>switchSetting(item.sn ,'exposure_ctrl' ,event , '9')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                    </a-space>
                                    <a-space direction="vertical" fill>
                                        <a-space>
                                            <span class="item_name">aec2</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.aec2"
                                                      @change="event =>switchSetting(item.sn ,'aec2' ,event , '12')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">ae_level</span>
                                            <div>
                                                <a-slider v-model="item['ae_level']" :max="2" :step="1" :min="-2"
                                                          @mouseup="sliderSetting(item.sn,'ae_level','18')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">aec_value</span>
                                            <div>
                                                <a-slider v-model="item['aec_value']" :max="1200" :step="1" :min="0"
                                                          @mouseup="sliderSetting(item.sn,'aec_value','15')"
                                                          :style="{width: '5em'}"/>
                                            </div>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">agc_gain</span>
                                            <a-slider v-model="item['agc_gain']" :max="30" :step="1" :min="0"
                                                      @mouseup="sliderSetting(item.sn,'agc_gain','14')"
                                                      :style="{width: '5em'}"/>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">gainceiling</span>
                                            <a-slider v-model="item['gainceiling']" :max="6" :step="1" :min="0"
                                                      @mouseup="sliderSetting(item.sn,'gainceiling','25')"
                                                      :style="{width: '5em'}"/>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">bpc</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.bpc"
                                                      @change="event =>switchSetting(item.sn ,'bpc' ,event , '20')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">wpc</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.wpc"
                                                      @change="event =>switchSetting(item.sn ,'wpc' ,event , '22')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">raw_gma</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.raw_gma"
                                                      @change="event =>switchSetting(item.sn ,'raw_gma' ,event , '21')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">lenc</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.lenc"
                                                      @change="event =>switchSetting(item.sn ,'lenc' ,event , '23')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">dcw</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.dcw"
                                                      @change="event =>switchSetting(item.sn ,'dcw' ,event , '19')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">colorbar</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.colorbar"
                                                      @change="event =>switchSetting(item.sn ,'colorbar' ,event , '6')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">whitebal</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.whitebal"
                                                      @change="event =>switchSetting(item.sn ,'whitebal' ,event , '7')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                        <a-space>
                                            <span class="item_name">gain_ctrl</span>
                                            <a-switch size="small" :checked-color="checked_color"
                                                      unchecked-color="rgb(var(--gray-4)"
                                                      :model-value="item.gain_ctrl"
                                                      @change="event =>switchSetting(item.sn ,'gain_ctrl' ,event , '8')"
                                                      checked-value="1"
                                                      unchecked-value="0"
                                            >
                                            </a-switch>
                                        </a-space>
                                    </a-space>
                                </a-space>


                            </div>
                        </template>
                    </a-trigger>
                    <a-trigger trigger="click" :unmount-on-close="false">
                        <a-button status="video">
                            <template #icon>
                                <icon-info/>
                            </template>

                        </a-button>
                        <template #content>
                            <div class="prop">
                                <a-space>
                                    <span v-for="(subList, index) in sliceObj(item, 12)" :key="index">

                                        <span v-for="(val,index1) in subList" :key="index1">
                                            <a-space direction="vertical" fill>
                                                <a-space><span>{{ val.key }}</span>:<span>{{ val.val }}</span></a-space>
                                            </a-space>
                                        </span>
                                    </span>
                                </a-space>

                            </div>
                        </template>
                    </a-trigger>
                </a-space>
            </div>

        </a-col>
    </a-row>
</template>
<script>
import {cmdChannel} from "@/js/on_start";
import axios from 'axios';
import meta from "@/js/camera_meta";
import {
    IconFullscreen,
    IconPlayArrowFill,
    IconPause,
    IconMoreVertical,
    IconDown,
    IconInfo, IconSunFill
} from "@arco-design/web-vue/es/icon";
import handleExtAttr from "@/js/dev";

import {video_svg} from "@/js/res";
export default {
    name: 'camera_card',
    components: {
        IconFullscreen, IconPlayArrowFill, IconPause, IconMoreVertical, IconDown,
        IconInfo,
        IconSunFill,
    },
    data() {
        return {
            cameras: {},
            img: video_svg,
            videoImg: ' video_pc',
            checked_color: "#2467ea",
            onFullScreen: false,
            fullScreenCamera: video_svg,
            meta: meta
        }
    },
    computed: {
        sliceObj() {
            return (data, count) => {
                if (data !== undefined) {
                    let index = -1;
                    let index1 = 0;
                    let result = [];
                    for (let key in data) {
                        if (meta.hide_attr.includes(key)) {
                            continue
                        }
                        if (index1++ % count === 0) {
                            result[++index] = [];
                        }
                        result[index].push({key: key, val: data[key]})
                    }
                    return result
                }
            }
        }
    },
    methods: {
        updateProp(sn, key, val, notUpdateLocal) {
            if (!notUpdateLocal) {
                this.cameras[sn][key] = val
            }
            let url = '/dm/updateProp';
            if (process.env.NODE_ENV === 'development') {
                url = window.dev.httpUrlBase + url;
            }
            axios.post(url, {
                sn: sn, key: key, value: val
            }).then(console.log).catch(console.log)
        },
        send(sn, opcode, params) {
            cmdChannel.sendRawCmd(sn, opcode, params);
        },
        reload(sn) {
            let img = this.cameras[sn].img;
            this.cameras[sn].img = video_svg
            this.cameras[sn].img = img
        },
        play(sn) {
            let channelIndex = parseInt(this.cameras[sn].channelIndex);
            let attachVideoChannel = {
                devSn: sn,
                channelIndex: channelIndex,
                channelType: 0 // mjpeg
            }
            let url = '/dm/attachVideoChannel';
            if (process.env.NODE_ENV === 'development') {
                url = window.dev.httpUrlBase + url;
            }
            axios.post(url, attachVideoChannel).then(console.log).catch(console.log)
            this.cameras[sn].ui.img = window.lightServerVideoBase + sn
            this.send(sn, 1, ['0']);
        }, stop(sn) {
            this.send(sn, 1, ['1']);
            this.cameras[sn].ui.img = video_svg;
        }, lightSwitch(sn) {
            const key = 'lightOn';
            let lightOn = this.cameras[sn][key] === '1'
            let nextState = lightOn ? '0' : '1'
            this.cameras[sn][key] = nextState;
            let params = lightOn ? ['3'] : ['2'];
            this.send(sn, 1, params);
            this.updateProp(sn, key, nextState)
        }, full_screen(sn) {
            this.onFullScreen = true;

            this.fullScreenCamera = this.cameras[sn].ui.img
            console.log(sn)
            //this.cameras[sn].ui.class = "";
        }, onExitFullScreen() {
            this.fullScreenCamera = video_svg
        }, changeFrameSize(sn, val) {

            this.send(sn, 2, ['0', '24', `${val}`]);
            this.updateProp(sn, "framesize", val)
        }, changeClkFreq(sn, val) {
            val = val === 20000000 ? 0 : 1;
            this.send(sn, 2, ['0', '27', `${val}`]);
            this.updateProp(sn, "xclk_freq_hz", val)
        }
        , sliderSetting(sn, key, subCode) {
            let val = this.cameras[sn][key]
            this.send(sn, 2, ['0', subCode, `${val}`]);
            this.updateProp(sn, key, "" + val, true)
        }, switchSetting(sn, key, val, subCode) {
            this.send(sn, 2, ['0', subCode, `${val}`]);
            this.updateProp(sn, key, "" + val)
        }
    }, created() {
        let url = "/camera/list"
        if (process.env.NODE_ENV === 'development') {
            url = window.dev.httpUrlBase + url;
        }
        axios.get(url, {}).then((res) => {
            for (let index in res.data) {
                let cameraInfo = handleExtAttr(res.data[index]);
                cameraInfo.ui = {img: video_svg}
                this.cameras [cameraInfo.sn] = cameraInfo;
            }

        }).catch((err) => {
            console.log(err);
        })
    }
}
</script>
<style>
.videoContainer {
    padding: 0 0 0.5em;
    text-align: center;
    width: 100%;
    height: 16.5rem;
}

.arco-col {
    display: inline-block !important;
    color: var(--color-white);
    margin: 16px 0 16px 0;
    padding: 1px;
}

.arco-btn-status-video {
    color: var(--color-white) !important;
    background: rgb(var(--gray-4)) !important;
}

.pop_menu {
    padding: 1em;
    color: var(--color-text-2);
    background: var(--color-bg-3);
    border-radius: 1em;
    box-shadow: 0px 0px 0px 1px rgb(var(--gray-3));
}

.prop {
    font-size: 0.5rem !important;
    padding: 1em;
    color: var(--color-text-2);
    background: var(--color-bg-3);
    border-radius: 1em;
    box-shadow: 0px 0px 0px 1px rgb(var(--gray-3));
}

.video_pc {

    text-align: center;
    border-radius: 5px 5px 0 0;
    background: rgb(var(--gray-3));
    width: 100%;
    height: 80%;
    margin-bottom: 0.4em;
}

.video_pc > img {
   width: 100%;
    height: 100%;
    object-fit: cover
}

button {
    margin-left: 0.2em;
}

.item_name {
    font-size: 1em;
    display: inline-block;
    width: 6em;
}

.console-item .arco-col > div {

    justify-content: center;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
}

.console-item .arco-col:nth-child(2n) > div {
    background-color: rgba(var(--cyan-4), 0.9);
}

.console-item .arco-col:nth-child(2n + 1) > div {
    background-color: rgba(var(--red-3, 0.8));
}

.frame_size_opt {
    font-size: 1em !important;
    line-height: 1.6em !important;
}
</style>